<template>
    <div class="chart-box">
        <div ref="chart1"></div>
        <div ref="chart2"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "DoubleExcellence",
    data() {
        return {
            options: {
                title: {
                    text: '优秀文书',
                    left: 'center',
                    top: '85%',
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        type: 'pie',
                        radius: '50%',

                        label: {
                            show: true,
                            formatter: '{b}\n{c}',
                            color: '#fff',
                        },
                        data: [
                            { value: 1048, name: '三等奖' },
                            { value: 735, name: '二等奖' },
                            { value: 580, name: '一等奖' },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
        }
    },
    mounted() {
        
        setTimeout(() => {
        const chart = echarts.init(this.$refs.chart1)
        chart.setOption(this.options)

        const chart2 = echarts.init(this.$refs.chart2)
        chart2.setOption({
            ...this.options, title: {
                text: '优秀庭审',
                left: 'center',
                top: '85%',
                textStyle: {
                    color: '#fff',
                    fontSize: 14
                }
            },
        })
        }, 0)
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 225px;
    display: flex;
    width: 100%;
    div {
        width: 50%;
        height: 100%;
    }
}
</style>